<template>
  <div class="r-l-c-page">
    <div class="stars"></div>
    <div class="head fss">
      <img src="./logo1.png" style="width: 300px" />
      <h1 class="head-name">医疗装备大数据分析平台 V1.1</h1>
      <div class="timer">
        {{ timer }}
        <v-icon color="#fff" @click="requestFullscreen">fullscreen</v-icon>
      </div>
    </div>
    <div class="content">
      <!-- 第一行 -->
      <div class="box-l">
        <div class="title">
          <span class="tcol1">设备资产情况</span
          ><span>({{ ($refs.box1 && $refs.box1.total) || 0 }}万元)</span>
        </div>
        <box1 ref="box1"></box1>
      </div>
      <div class="box-c np box2">
        <box2></box2>
      </div>
      <div class="box-r">
        <div class="title"><span class="tcol1">维保类型</span></div>
        <box3 ref="box3"></box3>
      </div>
      <!-- 第二行 -->
      <div class="box-l">
        <div class="title"><span class="tcol1">需求科室</span></div>
        <box4 ref="box4"></box4>
      </div>
      <div class="box-c box border2 box5">
        <div class="title">
          <span class="tcol1">在办工单</span>({{
            ($refs.box5 && $refs.box5.list.length) || 0
          }}个)
        </div>
        <box5 ref="box5"></box5>
      </div>
      <div class="box-r">
        <div class="title"><span class="tcol1">维保费用（元）</span></div>
        <box6 ref="box6"></box6>
      </div>
      <!-- 第三行 -->
      <div class="box-l">
        <div class="title"><span class="tcol1">近期工单量</span>(周)</div>
        <box7 ref="box7"></box7>
      </div>
      <div class="box-c box border2 pr">
        <div class="title" style="cursor: pointer" @click="changeFlag">
          <span class="tcol1">用户{{ boxFlag ? "好评" : "差评" }}</span
          >表
        </div>
        <box8 @flagChange="(e) => (boxFlag = e)" ref="box8"></box8>
      </div>
      <div class="box-r">
        <div
          class="title"
          style="cursor: pointer"
          v-if="box9Current === 0"
          @click="box9Current = 1"
        >
          <span class="tcol1">工程量工单</span>
        </div>
        <div class="title" style="cursor: pointer" v-else>
          <span class="tcol1" @click="box9Current = 0">工程师用时</span>
        </div>
        <box9 ref="box9" v-if="box9Current === 0"></box9>
        <box9_1 v-if="box9Current === 1"></box9_1>
      </div>
    </div>
  </div>
</template>

<script>
var zoom = 1;

function debounce(fn, delay) {
  let time = null;
  return function () {
    if (time) {
      clearTimeout(time);
      time = null;
    }
    time = setTimeout(fn, delay);
  };
}

// function match() {
//   let w = document.body.clientWidth;
//   w = w > 1200 ? w : 1200;
//   zoom = w < 1920 ? w / 1920.0 : 1920.0 / w;
//   document.getElementsByClassName("page")[0].style.zoom = zoom;
// }
// window.onload = match;
// window.addEventListener("resize", match);

import timerRange from "./timerRange.vue";
Vue.component("timerRange", timerRange);
import box1 from "./box1.vue";
import box2 from "./box2.vue";
import box3 from "./box3.vue";
import box4 from "./box4.vue";
import box5 from "./box5.vue";
import box6 from "./box6.vue";
import box7 from "./box7.vue";
import box8 from "./box8.vue";
import box9 from "./box9.vue";
import box9_1 from "./box9_1.vue";
import popup from "./popup.vue";
import Vue from "vue";

export default {
  components: {
    box1,
    box2,
    box3,
    box4,
    box5,
    box6,
    box7,
    box8,
    box9,
    box9_1,
    popup,
  },
  data() {
    return {
      title: 0,
      timer: "",
      upperNumber: ["日", "一", "二", "三", "四", "五", "六"],
      charts: [],
      isFull: false,
      boxFlag: 1,
      box9Current: 0,
    };
  },

  methods: {
    //加0
    fill(n) {
      return (n = n >= 10 ? n : "0" + n);
    },
    setTimer() {
      const fill = this.fill;
      let time = new Date();
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      let w = time.getDay();
      this.timer = `${y}年${fill(m)}月${fill(d)}日 ${fill(h)}:${fill(
        mm
      )}:${fill(s)}     ${"星期" + this.upperNumber[w]}`;
      // console.log(this.timer)
    },
    match() {
      let charts = [
        "echart1",
        "echart3",
        "echart3_1",
        "echart4",
        "echart6",
        "echart6_1",
      ];
      this.chartsDom = charts.map((c) => document.getElementById(c));
      this.chartsDom.forEach((c) => {
        c.style.zoom = zoom;
        c.style.transform.scale = 1 / zoom;
      });
    },

    requestFullscreen() {
      if (this.isFull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      } else {
        const docElm = document.documentElement;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    },
    changeFlag() {
      this.$refs.box8.flag = this.$refs.box8.flag ? 0 : 1;
    },
    resize() {
      let boxs = [1, 3, 4, 6, 7, 9];
      boxs.forEach((i) => {
        const box = this.$refs[`box${i}`];
        box && box.resize && box.resize();
      });
    },
  },
  created() {
    setInterval(this.setTimer, 1000);
  },
  mounted() {
    document.addEventListener("fullscreenchange", () => {
      const isFullScreen = document.fullscreenElement;
      this.isFull = !!isFullScreen;
    });
    window.onresize = debounce(this.resize, 600);
  },
  watch: {
    box9Current() {
      this.$refs.box9.current = this.box9Current;
    },
  },
};
</script>

 <style scpoed>
body {
  background: black;
  height: 100%;
  /* background-image: url(./Otr0s.jpg); */
  background-size: contain;
}
.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
    145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
    212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
    308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
    671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
    1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
    311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
    -790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
    -1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
    -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
    -1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
    36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
    1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
    624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
    410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
    977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
    -1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
    -437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
    -925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
    993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
    -170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
    -1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
    1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
    1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
    1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
    -997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
    -468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
    823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
    94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
    1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
    1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
    205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
    649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
    -1405px 397px #cfcfcf, 30px -81px #e6e6e6;
  animation: fly 3s linear infinite;
  transform-style: preserve-3d;
}
.stars:before,
.stars:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
}
.stars:before {
  transform: translateZ(-300px);
  animation: fade1 3s linear infinite;
}
.stars:after {
  transform: translateZ(-600px);
  animation: fade2 3s linear infinite;
}
@keyframes fly {
  from {
    transform: translateZ(0px);
  }
  to {
    transform: translateZ(300px);
  }
}
@keyframes fade1 {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
</style>

  <style lang="stylus">
  .r-l-c-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    perspective: 340px;

    // background: linear-gradient(
    // 90deg,
    // #00011d,
    // #03106b,
    // #06199a,
    // #03106b,
    // #00011d
    // );
    // background-image: url(./Otr0s.jpg);
    // background-size: 100vw 100vh;
    .pr, .box {
      position: relative;
      background-image: url('./border_1.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-size: 24vw calc(((100vh - 78px - 3vw) / 3));
      // padding: 5px;
    }

    .border2 {
      position: relative;
      background-image: url('./border_2.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-size: 48vw calc(((100vh - 78px - 3vw) / 3));
      // padding: 5px;
    }

    .pa {
      position: absolute;
    }

    fss {
      display: flex;
    }

    .fcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .head {
      position: relative;
      width: 100%;
      height: 78px;
      color: #fff;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      background-image: url('./head0.png'), url('./head1.png'), url('./head2.png'), url('./head3.png'), url('./head4.png'), url('./head5.png'), url('./head6.png'), url('./head7.png');
      background-size: 100% 78px;
      background-position: 0 -10px;
      background-repeat: no-repeat;
      animation: charge 10s ease-out infinite;
    }

    @keyframes charge {
      00.0% {
        background-image: url('./head0.png');
      }

      14.2% {
        background-image: url('./head1.png');
      }

      28.4% {
        background-image: url('./head2.png');
      }

      42.6% {
        background-image: url('./head3.png');
      }

      56.8% {
        background-image: url('./head4.png');
      }

      70.0% {
        background-image: url('./head5.png');
      }

      84.2% {
        background-image: url('./head6.png');
      }

      98.4% {
        background-image: url('./head7.png');
      }

      100% {
        background-image: url('./head0.png');
      }
    }

    .head h1 {
      position: absolute;
      font-size: 28px;
      font-family: '宋体';
      color: #fff;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
    }

    .content {
      display: flex;
      /* justify-content: space-evenly; */
      flex-wrap: wrap;
    }

    .box-l .title, .box-c .title, .box-r .title {
      position: absolute;
      top: 16px;
      left: 0;
      font-size: 18px !important;
      font-family: 'AP' !important;
      color: #fff;
      font-weight: 400;
      padding-left: 16px;
      z-index: 20;
    }

    .tcol1, .box-l .title .tcol1 {
      color: #04ffce;
    }

    .tcol2, .box-l .title .tcol2 {
      color: #fff;
    }

    .tcol3, .box-l .title .tcol3 {
      color: #ef6079;
    }

    .tcol4, .box-l .title .tcol4 {
      color: #f4c736;
    }

    .box-l {
      box-sizing: border-box;
      position: relative;
      width: 24vw;
      flex: 0 0 24vw;
      height: calc(((100vh - 78px - 3vw) / 3));
      /* background: #fff; */
      margin: 0 0 1vw 1vw;
      /* border: 1px solid #fff; */
      background: rgba(16, 178, 146, 0.1);
    }

    .box-c {
      box-sizing: border-box;
      position: relative;
      width: 48vw;
      flex: 0 0 48vw;
      height: calc(((100vh - 78px - 3vw) / 3));
      /* background: #fff; */
      margin: 0 0 1vw 1vw;
      padding: 10px;
      /* border: 1px solid #fff; */
    }

    .box-c::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(16, 178, 146, 0.1);
      top: 0;
      left: 0;
      z-index: -1;
    }

    .box-r {
      box-sizing: border-box;
      position: relative;
      width: 24vw;
      flex: 0 0 24vw;
      height: calc(((100vh - 78px - 3vw) / 3));
      /* background: #fff; */
      margin: 0 0 1vw 1vw;
      /* border: 1px solid #fff; */
      background: rgba(16, 178, 146, 0.1);
    }

    .timer-range {
      margin-top: 16px;
      display: inline-block;
    }

    .timer-range .tag {
      box-sizing: border-box;
      background: #086b58;
      color: #ddd;
      font-size: 12px;
      border-radius: 5px;
      padding: 1px 15px;
      margin-right: 2px;
      cursor: pointer;
      border: 1px solid transparent;
    }

    .timer-range .tag.active {
      background: #10b292;
      color: #fff;
      border: 1px solid #00f9c8;
    }

    .box-c.np {
      padding: 0;
    }

    .box-c .top {
      width: 100%;
      height: 60%;
      box-shadow: 5px 5px 15px #00ffd583 inset, -5px -5px 15px #00ffd583 inset;
      justify-content: space-evenly;
      align-items: center;
    }

    .box-c .top .item {
      display: flex;
      flex-direction: column;
    }

    .box-c .top .item .num {
      flex-grow: 1;
    }

    .bot-title {
      font-size: 14px;
      color: #999;
    }

    .box-c .bot {
      width: 100%;
      height: 40%;
      box-shadow: 2px 2px 10px #00ffd583 inset, -2px -2px 10px #00ffd583 inset;
      justify-content: space-evenly;
      align-items: center;
    }

    .doing {
      width: 100%;
      height: calc(100% - 30px);
      margin-top: 30px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 14px;
      color: #fff;
      line-height: 30px;
      white-space: nowrap;
      padding: 0 10px;
    }

    .doing .item {
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;
      padding-right: 5px;
    }

    .doing .item > span:first-child {
      display: inline-block;
      width: 80%;
      flex: 1 1 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .doing .people {
      width: 150px;
      // flex: 0 0 150px;
    }

    .doing .item .tag {
      width: 82px;
      line-height: 20px;
      height: 20px;
      box-sizing: border-box;
      background: rgba(44, 255, 215, 0.12);
      color: #00d1a9;
      border-radius: 10px;
      padding: 1px 5px;
      margin: 0 3px 0 16px;
      border: 1px solid rgba(44, 232, 188, 0.7);
      display: inline-flex;
      flex-grow: 0 !important;
      justify-content: center;
      align-items: center;
    }

    .box_bg {
      background: radial-gradient(
        rgba(1, 187, 255, 0),
        rgba(1, 187, 255, 0),
        rgba(1, 187, 255, 0.15)
      );
      border-image: linear-gradient(
        90deg,
        rgba(1, 187, 255, 0.08) 0%,
        rgba(15, 245, 248, 0.16) 100%,
        rgba(1, 187, 255, 0.08) 100%
      );
      2 2;
      border-radius: 4px;
    }

    .bx_bb {
      box-sizing: border-box;
    }

    .fss {
      display: flex;
    }

    .fcc {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .scrollbar::-webkit-scrollbar {
      width: 10px;
      // background: rgba(16, 178, 146,.1);
      background: #00876c26;
    }

    .scrollbar::-webkit-scrollbar-thumb {
      width: 10px;
      // background: #b1b1ba;
      background: #00876c;
      border-radius: 5px;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .mask .block {
      width: 80vw;
      /* background: rgba(2,12,37,0.80); */
      background: radial-gradient(#051b3b, rgba(5, 27, 59, 0.66));
      border: 1px solid rgba(1, 187, 255, 0.76);
      /* border-image: linear-gradient(90deg, rgba(1,187,255,0.76) 0%, rgba(15,245,248,0.16) 100%, rgba(1,187,255,0.08) 100%) 2 2; */
      border-radius: 5px;
      padding: 10px 24px;
      background: #0a1a38;
      color: #d6e2ff;
      border: none;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .mask ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      /* background: #073861; */
      background: #00876c26;
    }

    .mask ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      // background: rgba(4, 123, 180, 1);
      background: #00876c;
    }

    .mask ::-webkit-scrollbar-track {
      border-radius: 0;
      // background: rgba(7, 56, 97, 1);
      background: #00876c26;
    }

    .mt10 {
      margin-top: 10px;
    }

    .content-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 28px;
    }

    .content-item div {
      color: #fff;
    }

    .content-time {
      width: 240px;
    }

    .title-select {
      height: 40px;
    }

    .title-select ::v-deep .ant-select-selection {
      background-color: rgba(7, 47, 88, 1);
      color: #fff;
      border: 1px solid rgba(1, 186, 255, 0.8);
    }

    .title-select ::v-deep .ant-select-arrow {
      color: rgba(214, 226, 255, 1);
    }

    ::v-deep .content-table {
      margin: 18px auto;
      border-top: 1px solid rgba(32, 165, 247, 0.3);
      color: rgba(214, 226, 255, 1);
      text-align: center;
    }

    .table-title {
      text-align: center;
      letter-spacing: 1px;
      font-size: 24px;
      margin: 24px auto 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #fff;
    }

    .tablt-date {
      font-size: 14px;
      margin-bottom: 24px;
      text-align: center;
      color: #fff;
    }

    ::v-deep .ant-table-pagination.ant-pagination {
      margin: 10px;
    }

    .echart-box {
      height: 200px;
      padding: 0 34px;
    }

    .echart-box .echart-box-item {
      /* border: 1px solid rgba(4, 74, 116, 1); */
      padding: 8px 0 8px 34px;
    }

    ::v-deep .ant-table-footer {
      padding: 0;
      background: #0a1a38;
      border-top: 1px solid #003e63 !important;
    }

    ::v-deep .ant-table-footer::before {
      background: none;
    }

    .ant-table-header::-webkit-scrollbar {
      display: none;
      border: none;
    }

    .ant-table-footer .ant-table-body::-webkit-scrollbar {
      display: none;
      border: none;
    }

    .demo-infinite-container.modal-table {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .ant-calendar-picker-input.ant-input, .ant-select-selection.ant-select-selection--single {
      background: rgba(1, 186, 255, 0.2);
      border: 1px solid #01baff;
      color: #fff;
    }

    .ant-select-selection.ant-select-selection--single svg {
      color: #fff;
    }

    .ant-table-header.ant-table-hide-scrollbar {
      overflow: hidden !important;
    }

    .ant-table-header {
      margin-bottom: -17px;
      padding-bottom: 17px !important;
      background: transparent;
    }

    .ant-table-thead {
      border: 1px solid #003e63;
    }

    .ant-table-thead > tr > th {
      box-sizing: border-box;
      height: 40px;
      padding: 0 16px !important;
      background: transparent !important;
      color: #fff;
      border-bottom: 1px solid #003e63;
    }

    .ant-table-scroll {
      border-right: 1px solid #003e63;
    }

    .ant-table {
      color: #fff;
    }

    .ant-table-fixed-header {
      > .ant-table-content, > .ant-table-scroll, > .ant-table-body {
        background: transparent;
      }

      .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
        border-right: 1px solid #003e63;
      }

      .ant-table-tbody > tr > td {
        border-bottom: 1px solid #003e63;
      }

      .ant-table-tbody > tr:hover > td {
        background: none !important;
      }

      .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant-table-fixed-right table {
        border: 1px solid #003e63;
      }

      /* .ant-table-thead .ant-table-row-cell-break-word:first-child{
        padding: 9.5px 0 9.5px 8px;
      }
      .ant-table-thead > tr:first-child > th:first-child {
        border-top-left-radius: 4px;
      } */
      .ant-pagination-total-text {
        color: #fff;
      }

      ::v-deep .ant-input {
        background: rgba(1, 186, 255, 0.2);
        border: 1px solid #01baff;
      }
    }

    .timer {
      font-size: 20px !important;
    }

    .head-name {
      // font-family: 'Microsoft YaHei' !important;
      font-family: 'AP' !important;
    }

    .box-c.box2 {
      height: calc(((100vh - 78px - 3vw) / 3 / 2));
    }

    .box-c.box5 {
      height: calc((100vh - 78px - 3vw) / 3 * 1.5);
      margin-top: calc(((100vh - 78px - 3vw) / 3 / -2));
      background-size: 48vw calc((100vh - 78px - 3vw) / 3 * 1.5);
    }

    @font-face {
      font-family: 'AP';
      src: url('./Alibaba-PuHuiTi-Light.otf');
    }

    *:not(i), div, span {
      font-family: 'AP' !important;
    }
  }
</style>